<%--
  Created by IntelliJ IDEA.
  User: leixiaolong
  Date: 2018/11/21
  Time: 5:11 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>菜单管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/layui/css/layui.css" media="all"
          type="text/css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/extend/dtree/font/iconfont.css" media="all"
          type="text/css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/extend/dtree/dtree.css" media="all"
          type="text/css">
</head>
<body>

<div class="layui-inline" style="width: 100%;">
    <div class="layui-side-scroll" style="height: 100%; width: 30%;">
        <div style="height: 550px;overflow: auto;" id="toolbarDiv">
            <ul id="demoTree" class="dtree" data-id="0"></ul>
        </div>
    </div>
    <div class="layui-side" style="float:right; margin-left: 30%; width: 70%;">
        <iframe name="iframeContent" width="99%" height="100%" id="iframe_content" frameborder="0" scrolling="no"
                marginheight="0" marginwidth="0"></iframe>
    </div>
</div>

</body>
</html>

<script type="text/html" id="editBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script language='javascript' src="${pageContext.request.contextPath}/plugins/layui/layui.js"></script>
<script language='javascript' src="${pageContext.request.contextPath}/static/js/component/form-select.js"></script>
<script language='javascript' src="${pageContext.request.contextPath}/static/js/component/form-date.js"></script>
<script language='javascript' src="${pageContext.request.contextPath}/static/js/utils/moment.js"></script>

<script>
    var dtreeIns;
    var optNode, optData;

    layui.config({
        base: '/plugins/extend/dtree/',
    }).use(["dtree", "form", "jquery"], function () {
        var dtree = layui.dtree, $ = layui.jquery;

        var fatherParams = {};
        fatherParams = loadFatherNodes();

        // 渲染，使用data渲染
        dtreeIns = dtree.render({
            elem: "#demoTree",
            // data: dtreedata,
            url: "loadMenuTree",
            initLevel: "1",
            // dataStyle: "layuiStyle",
            async: false,
            useIframe: true,  //启用iframe
            done: function(){
                reloadIframe();
            },
            iframe: {
                iframeElem: "#iframe_content",  // iframe的ID
                iframeUrl: "menu_content", // iframe路由到的地址
                iframeLoad: "all",
                // iframeRequest: {menuType: 1, menuDesc: '测试菜单', menuNo: 1, fatherMenuName: '父级测试菜单'}
            },
            toolbar: true,
            toolbarScroll: "#demoTree", //划重点，必须配置，属性含义请参考文档
            toolbarLoad: "node",  // 表示工具栏加载的节点，  可选的值还有：noleaf（非最后一级）,leaf（最后一级节点）
            toolbarStyle: {
                title: "菜单"
            },
            toolbarShow: [],
            toolbarExt: [{
                toolbarId: "add", icon: "icon-roundadd", title: "增加菜单", handler: function (node) {
                    layer.msg(JSON.stringify(node.basicData));
                    layer.open({
                        type: 2,
                        id: 'add_form',
                        title: ['新增菜单', 'text-align: center; font-size: 20px;'],
                        // shadeClose: true,
                        // shade: false,
                        // maxmin: true, //开启最大化最小化按钮
                        area: ['800px', '600px'],
                        offset: 'auto',
                        content: '/sys/menu_add_mger',
                        success: function () {
                            var iframeId = document.getElementById('add_form').getElementsByTagName('iframe')[0].id;
                            var basicData = JSON.parse(node.basicData);
                            $('#' + iframeId)[0].contentWindow.init({
                                fatherMenuId: node.parentId,
                                menuType: basicData.menuType
                            });
                        }
                    });
                }
            },
                {
                    toolbarId: 'edit', icon: 'icon-bianji', title: '编辑菜单', handler: function (node) {

                        debugger
                        //记录当前节点
                        optNode = dtreeIns.getNowNode();
                        optData = node;

                        layer.msg(JSON.stringify(node));
                        layer.open({
                            type: 2,
                            id: 'edit_form',
                            title: ['编辑菜单', 'text-align: center; font-size: 20px;'],
                            // shadeClose: true,
                            // shade: false,
                            // maxmin: true, //开启最大化最小化按钮
                            area: ['800px', '600px'],
                            offset: 'auto',
                            content: '/sys/menu_edit_mger',
                            success: function () {
                                var iframeId = document.getElementById('edit_form').getElementsByTagName('iframe')[0].id;

                                var basicData = JSON.parse(node.basicData);
                                basicData["menuId"] = node.nodeId;
                                basicData["fatherMenuId"] = node.parentId;
                                $('#' + iframeId)[0].contentWindow.init(basicData);
                            }
                        });
                    }
                },
                {
                    toolbarId: 'del', icon: 'icon-roundclose', title: '删除菜单', handler: function (node) {
                        // layer.msg(JSON.stringify(node));
                        layer.confirm("是否删除菜单："+node.context, {icon: 3, title:'提示'}, function(){
                            //ajax调用删除记录
                            $.ajax({
                                url: 'delMenuInfo',
                                type: 'POST',
                                async: false,
                                data: {menuId: node.nodeId},
                                success: function(result){
                                    layer.msg("删除菜单成功, 菜单:"+node.context);
                                    reloadMenu();
                                },
                                error: function(result){
                                    layer.msg("删除数据失败:"+JSON.stringify(result));
                                }
                            });
                        });
                    }
                }],
            toolbarBtn: [
                [{"label": "菜单URL", "name": "menuUrl", "type": "text"},
                    {"label": "菜单类型", "name": "menuType", "type": "select", "optionsData": {"1": "根菜单", "2": "叶子菜单"}},
                    {"label": "菜单描述", "name": "menuDesc", "type": "text"},
                    {"label": "菜单序号", "name": "menuNo", "type": "text"},
                    {"label": "父菜单", "name": "fatherMenuId", "type": "select", "optionsData": fatherParams}],
                [{"label": "菜单URL", "name": "menuUrl", "type": "text"},
                    {"label": "菜单类型", "name": "menuType", "type": "select", "optionsData": {"1": "根菜单", "2": "叶子菜单"}},
                    {"label": "菜单描述", "name": "menuDesc", "type": "text"},
                    {"label": "菜单序号", "name": "menuNo", "type": "text"},
                    {"label": "父菜单", "name": "fatherMenuId", "type": "select", "optionsData": fatherParams}]
            ]
        });

        // 点击节点触发回调
        dtree.on("node('demoTree')", function (param) {
            debugger
            layer.msg(JSON.stringify(param));

            dtree.reload('demoTree', {
                iframe: {
                    iframeElem: "#iframe_content",  // iframe的ID
                    iframeUrl: "menu_content", // iframe路由到的地址
                    iframeLoad: "all",
                    iframeRequest: param
                }
            });

        });
    });

    function loadFatherNodes() {
        var params = {};

        layui.use(["jquery"], function () {
            var $ = layui.jquery;

            $.ajax({
                url: "getRootList",
                type: 'GET',
                async: false,
                success: function (result) {
                    var fatherNodes = result;

                    fatherNodes.forEach(function (value, index, arr) {
                        params[value.id] = value.title;
                    });

                    return params;
                },
                error: function (result) {
                    layer.msg("加载根菜单信息异常");
                    return;
                }
            });

        });

        return params;
    }

    function reloadMenu() {
        layui.use(["dtree"], function () {
            var dtree = layui.dtree;

            dtree.reload(dtreeIns, {});

            // setTimeout("reloadIframe()", 500);

        });
    }

    function reloadIframe() {
        layui.use(["dtree"], function () {
            var dtree = layui.dtree;

            // debugger
            // var node = dtreeIns.searchNode(optData.context);

            // debugger
            // var basicData = JSON.parse(optData.basicData);
            //
            // optData["basicData"] = encodeURI(encodeURI(optData.basicData));
            if(dtreeIns == null || typeof(dtreeIns) == 'undefined'){
                return;
            }
            var currNode = dtreeIns.getNowNode();
            dtreeIns.loadIframe(currNode, {});
        });
    }

</script>
